import { Avatar, Button, Image, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { BankOutlined } from '@ant-design/icons';
import companyImageData from '../../data/companyImageData';

const columns = (onRowNumberClick: (record: any) => void) => {
  const columns: ColumnsType<any> = [
    {
      title: '#',
      dataIndex: 'id',
      key: '__row_number',
      align: 'right',
      width: 48,
      render: (text, record, index) => {
        return (
          <Button
            type="link"
            style={{ padding: 0 }}
            onClick={() => onRowNumberClick(record)}
          >
            <em>{index + 1}</em>
          </Button>
        );
      }
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      key: 'companyName',
      render: (text, record, index) => {
        const logo: string | null = record.company.logo;
        return (
          <Space size={5}>
              {
                logo ?
                  <Avatar
                    draggable={false}
                    shape="square"
                    src={
                      <Image
                        src={logo.startsWith('/') ? logo : ('/' + logo)}
                        fallback={companyImageData}
                        preview={false}
                      />
                    }
                    style={{ backgroundColor: '#ffffff' }}
                  /> :
                  <Avatar
                    draggable={false}
                    shape="square"
                    icon={<BankOutlined style={{ color: '#707070', fontSize: 24 }} />}
                    style={{ backgroundColor: '#ffffff' }}
                  />
              }
              {text}
          </Space>
        );
      }
    },
    {
      title: '凭证数量',
      dataIndex: 'count',
      key: 'count',
      align: 'right'
    }
  ];
  return columns;
};

export default columns;
